<!--
> Muaz Khan     - github.com/muaz-khan 
> MIT License   - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->

<!DOCTYPE html>
<html id="home" lang="en">

<head>
    <title>One-to-One File Sharing using RTCMultiConnection ® Muaz Khan</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
    <meta name="author" content="Muaz Khan">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="//cdn.webrtc-experiment.com/style.css">
    <!-- for HTML5 el styling -->
    <script>
    document.createElement('article');
    document.createElement('footer');
    </script>

    <script src="//cdn.webrtc-experiment.com/firebase.js">
    </script>
    <script src="//cdn.webrtc-experiment.com/RTCMultiConnection.js">
    </script>
</head>

<body>
    <article>
        <h1>One-to-One File Sharing using <a href="http://www.RTCMultiConnection.org/docs/" target="_blank">RTCMultiConnection</a>
        </h1>

        <p>
            <a href="https://www.webrtc-experiment.com/">HOME</a>
            <span> &copy; </span>
            <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a> .
            <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a> .
            <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a> .
            <a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a> .
            <a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
        </p>

        <section>
            <h2>Open Data Channel</h2>
            <input type="text" id="channel" value="channel" style="font-size: 1.1em; text-align: right; width: 8em;" title="channel name - use your own channel name">
            <button id="init-RTCMultiConnection">Open</button>
            <h2>or join:</h2>
            <button id="join-RTCMultiConnection">Join</button>
        </section>
        <table style="border-left: 1px solid black; width: 100%;">
            <tr>
                <td style="background: white; border-right: 1px solid black;">
                    <h2 style="display: block; font-size: 1em; text-align: center;">Share Files</h2>
                    <input type="file" id="file" disabled>

                    <div id="file-progress"></div>
                </td>
            </tr>
        </table>
        <script>
        document.getElementById('channel').value = (Math.random() * new Date().getTime()).toString(36).replace(/\./g, '');

        var connection = new RTCMultiConnection();

        // file progress-bars container
        connection.body = document.querySelector('#file-progress');

        connection.session = {
            data: true
        };
        // connection.maxParticipantsAllowed = 1;
        connection.direction = 'one-to-one';

        document.getElementById('init-RTCMultiConnection').onclick = function() {
            connection.open(document.getElementById('channel').value || 'channel');
            document.getElementById('join-RTCMultiConnection').disabled = true;
            document.getElementById('init-RTCMultiConnection').disabled = true;
        };

        document.getElementById('join-RTCMultiConnection').onclick = function() {
            connection.connect(document.getElementById('channel').value || 'channel');
            document.getElementById('join-RTCMultiConnection').disabled = true;
            document.getElementById('init-RTCMultiConnection').disabled = true;
        };

        document.getElementById('file').onchange = function() {
            var file = this.files[0];
            connection.send(file);
        };

        connection.onopen = function() {
            document.getElementById('file').disabled = false;
        };
        </script>
        <br/>
        <br/>

        <h2>
            <a href="http://www.rtcmulticonnection.org/docs/" target="_blank">RTCMultiConnection Documentation!</a>
        </h2>
        <br/>
        <br/>
        <section style="border: 1px solid rgb(189, 189, 189); border-radius: .2em; margin: 1em 3em;">
            <h2 id="feedback" style="border-bottom: 1px solid rgb(189, 189, 189); padding: .2em .4em;">Feedback</h2>

            <div>
                <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
            </div>
            <button id="send-message" style="font-size: 1em;">Send Message</button>
        </section>
    </article>
    <a href="https://github.com/muaz-khan/RTCMultiConnection" class="fork-left"></a>

    <footer>
        <a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a> and
        <a href="http://www.RTCMultiConnection.org/docs/" target="_blank">RTCMultiConnection.js</a> ©
        <a href="mailto:muazkh@gmail.com" target="_blank">Muaz Khan</a>:
        <a href="https://twitter.com/WebRTCWeb" target="_blank">@WebRTCWeb</a>
    </footer>

    <!-- commits.js is useless for you! -->
    <script src="//cdn.webrtc-experiment.com/commits.js" async>
    </script>
</body>

</html>